<template>
    <div>
        <!-- 广告轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height: 100px;">
            <van-swipe-item><van-image fit="contain"
                    src="https://img1.baidu.com/it/u=306553046,2064608373&fm=253&fmt=auto&app=138&f=PNG?w=500&h=269"></van-image></van-swipe-item>
            <van-swipe-item><van-image fit="contain"
                    src="https://img0.baidu.com/it/u=3152078875,1859517579&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500"></van-image></van-swipe-item>
            <van-swipe-item><van-image fit="contain"
                    src="https://img1.baidu.com/it/u=173212637,280263868&fm=253&fmt=auto&app=138&f=JPEG?w=410&h=258"></van-image></van-swipe-item>
            <van-swipe-item><van-image fit="contain"
                    src="https://img2.baidu.com/it/u=2080707488,4112500296&fm=253&fmt=auto&app=138&f=JPEG?w=417&h=225"></van-image></van-swipe-item>
        </van-swipe>
        <van-grid>
            <van-grid-item @click="router.push('/home/liveClassOne/1')" icon="edit" icon-color="#1E90FF" text="科目一" />
            <van-grid-item @click="router.push('/home/liveClassOne/2')" icon="logistics" icon-color="#FF7F50" text="科目二" />
            <van-grid-item @click="router.push('/home/liveClassOne/3')" icon="bar-chart-o" icon-color="#008000"
                text="科目三" />
            <van-grid-item @click="router.push('/home/liveClassOne/4')" icon="orders-o" icon-color="#00FF7F" text="科目四" />
        </van-grid>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!-- 评论模块 -->
            <comment-item 
            v-for="item in bata"
            :items="item"
            :key="item.content_id"
            ></comment-item>

        </van-list>
        <!-- 评论按钮 -->
        <!-- <van-sticky :offset-bottom="50" position="bottom" style="width: 50px;">
            <van-button icon="plus" @click="showPopup" type="primary"
                style="border-radius: 50%;height: 50px; width: 50px;;margin-left: 10px;"></van-button>
        </van-sticky> -->
        <!-- 回到顶部 -->
        <van-back-top style="margin-bottom: 3%;" />
        <!-- <van-popup v-model:show="show" position="bottom" :style="{ height: '15%' }">
            <div class="btn">
                <van-button round type="primary" color="red"
                    @click="router.push('/home/LiveClassComment/1')">评论</van-button>
                <van-button round type="warning" color="orange"
                    @click="router.push('/home/LiveClassComment/2')">提问</van-button>
            </div>
        </van-popup> -->
    </div>
    <!-- import CommentItem from "@/components/CommentItem.vue";
    import httpApi from '@/http';
    const bata = reactive([]);
    onMounted(() => {
      httpApi.liveApi.queryBylist({ page:1,pagesize:10,type:'科目一' }).then((res) => {
        console.log("加载详情：", res);
        bata.push(...res.data.data.result)
        console.log(bata.value)
      });
    });   -->

</template>



<script setup>
import { createApp, ref,onMounted,reactive } from 'vue'
import { Tab, Tabs, Popup, Empty, Swipe, SwipeItem, Image as VanImage, Icon, BackTop, List } from 'vant'
import CommentItem from "@/components/CommentItem.vue";
import { useRouter } from 'vue-router';
import httpApi from '@/http';
const app = createApp();
app.use(Tab);
app.use(Tabs);
app.use(Popup);
app.use(Empty);
app.use(Swipe);
app.use(SwipeItem);
app.use(Icon);
app.use(BackTop);
// app.use(List);

const router = useRouter()
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const loading = ref(false);
const finished = ref(false);
const bata = reactive([]);


// const onLoad = () => {
//     // 异步更新数据
//     // setTimeout 仅做示例，真实场景中一般为 ajax 请求
//     setTimeout(() => {
//         for (let i = 0; i < 10; i++) {
//             list.value.push(list.value.length + 1);
//         }

//         // 加载状态结束
//         loading.value = false;

//         // 数据全部加载完成
//         if (list.value.length >= 40) {
//             finished.value = true;
//         }
//     }, 1000);
    
// };
onMounted(() => {
      httpApi.liveApi.queryByAlist({ page:1,pagesize:10 }).then((res) => {
        // console.log("加载详情：", res);
        bata.push(...res.data.data.result)

      });
    });     



</script>
<style lang="scss" scoped></style>
<style>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 140px;
    text-align: center;

}

.pinglun {
    display: flex;
    margin-bottom: 10px;

}

.pl {
    background-color: aqua;
    width: 325px;
    height: 113px;

}

.pinglun .ip {
    background-color: red;
    font-size: 0.5rem;
}

.btn {
    display: flex;
    justify-content: space-between;
    margin: 30px 80px;
}

element.style {
    width: 0;
}
</style>